<!DOCTYPE html>
<html>
<head>
    <title>Image Upload and Display</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- 样式 -->
    <style>
        /* 页面外观 */
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4);
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }


        #image-container {
            border: 1px solid #d3d3d3;
            background-color: #fff;
            padding: 30px 50px;
            border-radius: 10px;
            max-width: 65%;
            margin: 5px auto;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            height: 2000px;
        }

        h1 {
            text-align: center;
            font-size: 40px;
            color: #333;
            margin-bottom: 30px;
            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        }

        #model-select {
            margin-bottom: 30px;
        }

        #model-select h2 {
            margin: 0;
            font-size: 24px;
            color: #333;
        }

        #model-select1 {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #d3d3d3;
            appearance: none;
            -webkit-appearance: none;
            background-color: #f8f8f8;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M8 2L4 6 0 2z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        #model-select1:hover,
        #model-select1:focus {
            background-color: #d3d3d3;
            color: #fff;
        }

        #image-upload {
            margin-bottom: 30px;

        }

        #upload-btn {
            margin-right: 10px;
            cursor: pointer;
        }

        #upload-btn::-webkit-file-upload-button {
            cursor: pointer;
        }

        #upload-btn:hover,
        #upload-btn:focus {
            background-color: #d3d3d3;
            color: #fff;
        }

        #upload-image-btn {
            background-color: #4caf50;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #upload-image-btn:hover {
            background-color: #3e8e41;
        }

        #image-holder {
            margin-top: 30px;
            text-align: center;
            width: 200px;
            height: 200px;
            align-items: center;
        }

        #image-holder img {
            max-width: 450%;
            height: auto;

        }

        /* 响应式设计 */
        @media only screen and (max-width: 600px) {
            #image-container {
                padding: 20px;

            }

            h1 {
                font-size: 32px;
            }

            #model-select h2 {
                font-size: 20px;
            }

            #model-select1 {
                font-size: 14px;
            }

            #upload-image-btn {
                font-size: 14px;
            }
        }
        .image1{
            position: relative;
            top:150px;
            width:700px;
            height: 700px;
            margin:0px;
            padding: 0px;
        }
    </style>
<body>
<!-- 页面内容 -->

<div id="image-container">
    <h1>图片上传和检测</h1>
    <div id="model-select">
        <h2>模型选择:</h2>
        <select id="model-select1">
            <option value="yolov5" selected>yolov5</option>
            <option value="ssd">SSD</option>
            <option value="fast_rcnn">Fast R-CNN</option>
            <option value="多模型融合">多模型融合</option>
        </select>
    </div>
    <div id="image-upload">
        <h2>图片选择上传:</h2>
        <input type="file" id="upload-btn"/>
        <button id="upload-image-btn">上传</button>
    </div>
    <div id="image-holder" style="display:flex;justify-content: center;width: 100%"></div>
</div>


<!-- 脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        // 文件上传
        $('#upload-image-btn').click(function () {
            var file_data = $('#upload-btn').prop('files')[0];
            var form_data = new FormData();
            form_data.append('file', file_data);
            var selectedModel = document.getElementById('model-select1');
            var modelName = selectedModel.value;
            form_data.append('model', modelName);

            // 发送 AJAX 请求
            $.ajax({
                url: '/upload',
                type: 'POST',
                data: form_data,
                contentType: false,
                cache: false,
                processData: false,
                xhr: function () {
                    // 显示上传文件的进度条
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener('progress',
                        function (evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = (evt.loaded / evt.total) * 100;
                                console.log(percentComplete);
                                // 更新进度条
                                $('#upload-image-btn').html('Uploading...');
                                $('.progressbar div').width(percentComplete + '%');
                            }
                        }, false);
                    return xhr;
                }, success: function (data) {
                    // 显示上传的图像
                    $('#image-holder').empty();
                    $('#image-holder').append('<img class="image1" src="data:image/jpeg;base64,' + data + '">');
                    // 还原上传按钮文本
                    $('#upload-image-btn').html('Upload');
                }, error: function () {
                    // 显示错误信息
                    $('#image-holder').html('<p>Error uploading file.</p>');
                    // 还原上传按钮文本
                    $('#upload-image-btn').html('Upload');
                },
            });
        });
    });
</script>
</body>
</html>